導航設計 Navigation design for iOS(模式)
導航的價值
良好的導航設計讓使用者感到自然,不會干擾他們的操作流程。
A導航是教會使用者如何使用應用。
導航涉及教導使用者如何操作、瞭解各個功能的位置以及理解應用的工作方式(導航的設計不僅僅是介面佈局,還包括引導使用者的認知和操作邏輯)。
/Untitled.png)
B 讓使用者知道每個功能在哪裡和如何工作。
/Untitled 1.png)
/Untitled 2.png)
導航的目標是提供足夠的熟悉感基礎,讓使用者可以輕鬆發現內容並與應用進行互動(熟悉感可以減少使用者的學習成本,提高應用的易用性)。
/Untitled 3.png)
Tab bar標籤欄導航
定義:標籤欄是位於螢幕底部的全域性導航控制元件,將應用的內容分類到不同的部分。
目的:反映應用的資訊層次結構,建立不同區域之間的關係。
A Use tabs to reflect your information hierarchy 使用標籤欄來反應你的資訊結構,標籤欄導航是應用層次結構的頂端。
B 清晰性:每個標籤應有明確、描述性的標籤,指明其功能。
透過簡潔的標籤講述了應用的功能(好的標籤設計可以透過簡潔明瞭的文字,讓使用者一眼就明白應用的主要功能)。
“Listen Now”和“Radio”表明這是一個以聽覺媒體為主的內容應用。對於這個應用,“Library”和“Albums”暗示了內容豐富,“For You”標籤則表明有強大的個性化推薦功能。
/Untitled 4.png)
/Untitled 5.png)
/Untitled 6.png)
C Balance features throughout tabs 將相關功能分組,均勻分佈在各個標籤上。避免在一個標籤中組合不相關的功能。目標是把幾件事做得很好,而不是試圖在一個應用中解決所有問題。
反例:描述了一個將所有內容逐漸堆迭而造成資訊難以被尋找的應用設計過程。
這個應用目標是讓人們像本地騎行者一樣發現城市中的精選路線。由於這個應用是關於尋找騎行路線的,所以你首先看到的是一個帶有騎行過濾器的地圖檢視。
/Untitled 7.png)
然後,有一個即將進行的行程部分,我可以透過編輯內容或邀請朋友與之互動。接下來是分組在集合檢視中的路線。將所有功能都新增到一個標籤中。
/Untitled 8.png)
分組在集合檢視中的路線。將所有功能都新增到一個標籤中可能很有誘惑力,因為一目瞭然(儘管把所有功能放在一個標籤中看起來很方便,但實際上會影響使用者體驗)。
/Untitled 9.png)
應用隨著時間的推移變得複雜了,標籤欄中也無法對功能進行分組。
總結:在這種設計中,使用者可能需要大量滾動才能找到他們想要的東西。應用功能的擴充套件可能導致最初的分組邏輯被打亂,需要重新規劃。
/Untitled 10.png)
最佳化方式:
實現這一點的方法是退一步問自己,為什麼人們使用你的應用?優秀的應用有專注的解決方案(明確應用的核心功能和使用者需求是設計良好導航的前提)。
/Untitled 11.png)
我們重新考慮一下這個騎行應用的標籤欄。人們使用這個應用來找到適合他們水平的感興趣的路線。
路線是應用中最重要的檢視之一,因為它代表了使用者最關心的內容。因此,讓我們退一步,先將路線所包含的內容設計好。
這是一個路線詳情。使用者會希望看到概覽,例如距離和海拔增益,以及訪問路線中的地圖和道路表面,如人行道或道路(路線詳情應包含關鍵資訊,方便使用者評估路線是否適合)。
/Untitled 12.png)
看到陡峭攀爬或下降的具體標註可以幫助我瞭解這條路線是否適合我的水平(詳細的標註可以幫助使用者更好地做出決策)。
/Untitled 13.png)
路線沿途的食物站對規劃行程非常有幫助(提供食物站資訊可以提升使用者的騎行體驗)。
/Untitled 14.png)
人們如何理解檢視路線這一核心功能呢?只有當你知道路線的位置時,路線才有用(位置資訊是路線功能的核心,必須明確顯示)
路線應該與它們所在的城市有關係。這可能會引導我檢視一個城市概覽,告訴我關於在那裡的騎行的有用資訊(將路線與城市關聯,可以提供更全面的資訊)。向下滾動檢視,會看到所有可騎行路線的列表
/Untitled 15.png)
/Untitled 16.png)
這個應用也支援不同城市的路線,這意味著每個城市都應該返回到所有地點的列表(多城市支援需要清晰的導航結構,以便使用者在不同城市之間切換)。
/Untitled 17.png)
所以地點就可以成為導航到路線時的頂級層次(將地點作為頂級層次,有助於使用者快速找到目標路線)。
第一個Tab的資訊層級確定完成,可以看到是退後一步從產品提供的核心價值出發反推出的資訊層級結構。
/Untitled 18.png)
方法:針對應用中的關鍵功能(如行程)來思考,什麼是行程?人們將如何使用它?我可以在應用中為它們專門設計一個地方嗎?
這樣的更均衡,因為每個標籤有著不同的內容和對應的操作。
/Untitled 19.png)
/Untitled 20.png)
D Avoid duplicating functionality into a single tab 避免同一個頁面功能重複
錯誤的思維過程:當行程功能使用的人不多時,往往會想到是因為使用者沒注意到這個功能,進而就想加一個首頁把所有內容都塞進去。如在“Places”卡片上新增行程,並建立一個將功能置於中心的行程檢視版本,如邀請朋友或列出站點,並便捷地新增操作。
/Untitled 21.png)
“首頁”看上去在試圖解決功能發現的問題。但將不同標籤或應用各區域的功能被重複並新增到一個沒有足夠上下文的單一螢幕上,就會導致冗餘和混亂。
其結果會造成標籤破壞資訊層級,導致功能過載和混亂。功能冗餘會讓使用者感到困惑,影響使用體驗。所以移除“Home”標籤,可以簡化介面,提升使用者理解和操作的清晰度。
/Untitled 22.png)
/Untitled 23.png)
另一個 Home”標籤的問題是,點選home標籤中的元素將使用者帶到另一個標籤會給使用者帶來方向性的迷失。永遠不要強制使用者自動切換標籤
E Keep tabs persistent throughout your app 保持標籤欄的可見性,可以讓使用者隨時訪問頂級層次內容,也幫助使用者在不同層次之間無縫切換。
例如,我可以在“Places”標籤中檢視我考慮騎行的新路線,並將其與我在“行程”標籤中建立的行程進行比較,其中包含我已經儲存的深入到兩個層次的路線
F Use clear and concise labels 使用清晰簡潔的標籤
這是Slopes應用。我覺得它很棒的一點是,當你啟動應用時,你會進入中間的標籤,即你的日誌簿,其中包含你的季節統計資料。讓我立刻知道這個應用的功能和使用方法,比如記錄滑雪日、瀏覽度假村、與朋友比較統計資料;這些都用簡潔的標籤代表了核心功能。
/Untitled 24.png)
/Untitled 25.png)
層級結構中的兩個類別
應用層次結構和檢視之間轉換的方法常見的有兩種過渡形式:“推進Push” 和 “模態Mode”
“推進”是層次導航的一種方式,表示進入更深層次的內容(二級頁)使用者點選了一個元素,下一螢幕從右到左滑入視野。推進式導航直觀地表示了內容層次之間的關係,符合使用者的操作預期。
模態呈現是一種不干擾使用者操作的過渡方式,常用於獨立任務或流程。模態非常適用於獨立的工作流程,意思是使用者在該檢視中有足夠的資訊來做出決策並完成任務。例如,建立新行程會在模態檢視中呈現。使用者可以選擇或輸入資料,如標題、城市、日期範圍,甚至邀請朋友。
Hierarchical navigation 層級導航
A To traverse your app's hierarchy 推進式層級導航有助於幫助使用者直觀理解頂層和下層級的關係,
層次導航透過逐步選擇和深入,幫助使用者聚焦目標內容,內容應該變得越來越具體,並且隨著我推進和深入細節。
/Untitled 26.png)
B Use the navigation bar to orient people 使用導航欄來引導使用者,導航欄的標籤可以幫助使用者明確當前所在的層次和內容。
因為透過滾動螢幕和深入應用進行導航不必記住使用者來自哪裡或如何回到那裡,因為返回按鈕可以指示層次結構中的上一級動態返回按鈕。減少了使用者的記憶負擔
/Untitled 27.png)
C Use with a disclosure indicator 與顯示指示器一起使用
披露指示器,也稱為尖角符號,指向期望跳轉的方向。箭頭的方向代表進入到下一個層級中。
/Untitled 28.png)
/Untitled 29.png)
這兩個箭頭的方向也會受到不同語言和閱讀習慣的影響,在西方文化中,從左到右閱讀,這個方向表示進展。但在從右到左的語言中,如阿拉伯語和希伯來語,進展的心理模型是朝相反方向進行的。
/Untitled 30.png)
D When navigating frequently between content 當需要頻繁在內容之間切換時使用Push
Messages應用。即使層次結構相對扁平,我也可以透過推進式過渡輕鬆進出訊息,如果每條訊息不是推進,而是模態,那麼在不同聊天之間無縫切換會增加操作的複雜度。
Modal presentations 模態視窗
A Present from the bottom of the screen 從螢幕底部展現現
模態檢視從底部呈現,可以清楚地表明這是一個獨立的操作流程。這防止了使用者進一步深入應用。這是一個有意的干擾動畫,目的是加強集中使用者的注意力。
B Use for a simple task, multi-step, or full-screen 用於簡單任務、多步驟或全屏任務
簡單任務 a simple task,建立事件或設定提醒,編輯和修改輸入欄位。保持集中注意力可以幫助使用者不受干擾地完成任務。還可以最大限度地減少由於點選其他元素或標籤而意外中斷流程的可能性
多步驟任務 a multi-step task,例如向錢包中新增交通卡完成需要複雜任務的工作流程。目的是透過隱藏標籤欄並防止使用者在任務完成或取消之前四處移動來加強注意力集中
全屏內容 full-screen content,當檢視文章、影片或需要最少額外導航的全屏內容時。在Fitness應用中開始鍛鍊時,它以影片呈現,這是模態呈現的一個很好的場景。
C Use preferred and 'cancel' actions appropriately 適當使用首選和“取消”操作
標題有助於使用者定位螢幕的內容,例如“新行程”。右側的標籤通常是首選操作,因此通常以較粗的字型顯示以強調重要性。
/Untitled 31.png)
標籤本身是一個簡潔的肯定動詞,告訴我點選時會發生什麼。
/Untitled 32.png)
首選操作關閉模態檢視,並且應該保留應用的前一個狀態。如果模態檢視中尚未輸入或互動,未完成的必填欄位應透過不可用的操作按鈕提醒使用者。
/Untitled 33.png)
如果你有首選操作,那麼使用左側的“取消”操作來關閉模態,明確表示我正在放棄工作流程。
在重要資料丟失前提醒使用者,可以避免誤操作。如果在點選“取消”之前輸入了任何資訊,告知使用者如果繼續取消將丟失資料。
如果沒有與UI進行互動,點選“取消”應該只是簡單地關閉模態檢視
/Untitled 34.png)
/Untitled 35.png)
D Use close for minimal interaction 合理使用關閉來最小化互動
謹慎使用關閉符號,並且僅在模態檢視需要最少互動且不需要文字輸入時使用。例如App Store的“Today”標籤中的這篇文章。這裡是可以使用X符號的。無輸入任務時,簡單的關閉符號可以避免干擾使用者注意力。
/Untitled 36.png)
這種情況下不適合使用X關閉符號,比如在選擇了一個過濾器之後,如果我點選關閉,這些選擇是會被應用還是取消?如果沒有明確的操作標籤,使用者會想,“如果我點選關閉,會發生什麼?”
/Untitled 37.png)
總結:在導航欄中使用標籤通常是首選,因為它更加明確,操作更加清晰。
E Limit modals over modals 限制模態視窗疊加模態視窗
儘量限制模態檢視疊加,因為這會讓人感到不安和過於複雜。編輯檢視需要使用者進行實際操作,而不僅是瀏覽。
例如,點選我新增到行程中的一個朋友的表格單元格。這裡有一個尖腳符號代表推進的層級互動,當推進時,這個檢視可能會顯示關於Kate的資訊和移除的功能。
/Untitled 38.png)
“新增人員”和“上傳照片”的標籤是有顏色的,這表明這些操作是可點選的。
/Untitled 39.png)
上傳照片是一個包含大量互動的工作流程,比如滾動檢視我的相機膠捲並選擇一張新照片。將其定義為一個自包含任務。一旦選擇了照片,該模態檢視就會關閉,回到最初的模態檢視。